<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>直播</title>
    <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/1.4.7/skins/default/index.css"/>
    <link href="css/myindex.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="http://g.alicdn.com/de/prismplayer/1.4.7/prism.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=MurEuMIin6NtVhghKgxOd96U"></script>

    <script src="js/jquery.min.js"></script>
    <script src="js/base64.min.js"></script>

</head>
<body>
<div class="globle">

    <div class="conter">
        <div class="title">
            <span><img src="img/zhibo.png"/>灾情直播间</span>
            <!--
                <ul>
                    <li>共<span>113</span>分类</li>
                    <li><span>3344</span>场直播</li>
                    <li>全部分类 >></li>
                </ul>-->
        </div>
        <div class="detail">
            <div class="shipin">
                <div class="prism-player" id="J_prismPlayer" style="height: 100%;"></div>
            </div>
            <div class="right_info">
                <div class="ditu">
                    <span class="ditu_title">地图</span>
                    <div class="ditu_info">
                        <div id="allmap" style="height: 100%;"></div>
                        <div id="info" style="display: none;">
                            <ul class="info_ul">
                                <li class="name"><img src="img/user.png"><span>张三</span>漕河镇水管站</li>
                                <li class="phone"><span>13156428632</span></li>
                                <li class="addr"><img src="img/map.png">湖北省黄冈市蕲春县</li>
                                <li><a href="javascript:void(0);" onclick="shipin()">进入直播</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="info_detail">
                    <div class="info_detail_title">
                        <ul>
                            <li>预警</li>
                            <li>水情</li>
                            <li>雨情</li>
                        </ul>
                    </div>
                    <div class="info_detail_detail">
                        <div class="yujing">
                            <!--
                           <div class="yujing_info">
                                    <span>预警名称</span>
                                    <span>旧街道办事处河道洪水准备转移</span>
                                </div>
                                <div class="yujing_info">
                                    <span>预警时间</span>
                                    <span>2016-10-31 18:00</span>
                                </div> -->

                        </div>
                        <div class="shuiqing" style="display: none;">

                        </div>
                        <div class="yuqing" style="display: none;">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function () {
        //alert($(window).height()); //浏览器当前窗口可视区域高度
        //alert($(document).height()); //浏览器当前窗口文档的高度
        var shipinH = $(document).height() - $('.header').height() - $('.conter .title').height();
        $('.detail').height(shipinH);
        $('.shipin').height(shipinH - 23);
        var info_detailH = $('.right_info').height() - $('.ditu').height();
        $('.info_detail').height(info_detailH);

        var info_detail_detailH = $('.info_detail').height() - $('.info_detail_title').height();
        $('.info_detail_detail').height(info_detail_detailH - 13);

        $('.info_detail_title ul li').css({
            'border': '0 solid #ffffff',
            'border-bottom': '1px solid #ffffff',
            'background': '#F6F6F6',
            'color': 'black'
        });
        $('.info_detail_title ul li:nth-child(1)').css({
            'border': '1px solid #cccccc ',
            'border-bottom': '1px solid #ffffff',
            'background': '#ffffff',
            'color': '#719AB8'
        });
        var right_infoW = $('.conter').width() - $('.shipin').width() - 14;
        //alert(right_infoH);
        $('.right_info').width(right_infoW);
        $('.info_detail_title ul li').on('click', function () {
            $('.shuiqing,.yujing,.yuqing').hide();
            $('.info_detail_title ul li').css({
                'border': '0 solid #ffffff',
                'border-bottom': '1px solid #ffffff',
                'background': '#F6F6F6',
                'color': 'black'
            });
            if ($(this).index() == 0) {
                $(this).css({
                    'border': '1px solid #cccccc ',
                    'border-bottom': '1px solid #ffffff',
                    'background': '#ffffff',
                    'color': '#719AB8'
                });
                $('.yujing').show();
            } else if ($(this).index() == 1) {
                $(this).css({
                    'border': '1px solid #cccccc ',
                    'border-bottom': '1px solid #ffffff',
                    'background': '#ffffff',
                    'color': '#719AB8'
                });
                $('.shuiqing').show();
            } else if ($(this).index() == 2) {
                $(this).css({
                    'border': '1px solid #cccccc ',
                    'border-bottom': '1px solid #ffffff',
                    'background': '#ffffff',
                    'color': '#719AB8'
                });
                $('.yuqing').show();
            }
        })
        $.ajax({
            type: 'get',
            url: 'http://www.cloudowr.com:8801/api/svr/mgr/sh/getPptn', //雨量
            dataType: 'jsonp',
            success: function (data) {
                var index = 0;
                var str = '<table><tr><td>序号</td><td>测站名称</td><td>测站编码</td><td>最新数据时间</td><td>实时雨量</td><td>当日雨量</td><td>前1小时</td><td>前3小时</td><td>前6小时</td><td>前12小时</td><td>前24小时</td><td>前48小时</td></tr>';
                $.each(data.ret, function (i, d) {
                    index = index + 1;
                    if (d.sbstatus == 0) {
                        str = str + '<tr><td>' + index + '</td><td>' + d.stnm + '</td><td>' + d.stcd + '</td><td>' + d.tm + '</td><td>' + d.drp + '</td><td>' + d.drpday + '</td><td>' + d.drphour + '</td><td>' + d.drp3h + '</td><td>' + d.drp6h + '</td><td>' + d.drp12h + '</td><td>' + d.drp24h + '</td><td>' + d.drp48h + '</td></tr>';
                    } else if (d.sbstatus == 1) {
                        str = str + '<tr class=\'sbstatus\'><td>' + index + '</td><td>' + d.stnm + '</td><td>' + d.stcd + '</td><td>' + d.tm + '</td><td>' + d.drp + '</td><td>' + d.drpday + '</td><td>' + d.drphour + '</td><td>' + d.drp3h + '</td><td>' + d.drp6h + '</td><td>' + d.drp12h + '</td><td>' + d.drp24h + '</td><td>' + d.drp48h + '</td></tr>';
                    }

                });
                str = str + '</table>';
                $('.yuqing').append(str);
            }
        });
        $.ajax({
            type: 'get',
            url: 'http://www.cloudowr.com:8801/api/svr/mgr/sh/getRivr', //水情
            dataType: 'jsonp',
            success: function (data) {
                var index = 0;
                var str = '<table><tr><td>序号</td><td>测站名称</td><td>测站编码</td><td>最新数据时间</td><td>实时水位</td><td>当日最高水位</td><td>水系名称</td><td>所属乡镇</td><td>水势</td></tr>';
                $.each(data.ret, function (i, d) {
                    index = index + 1;
                    var wptn;
                    if (d.wptn == 4) {
                        wptn = '↓';
                    } else if (d.wptn == 5) {
                        wptn = '↑';
                    } else if (d.wptn == 6) {
                        wptn = '↔';
                    }
                    if (d.sbstatus == 0) {
                        str = str + '<tr><td>' + index + '</td><td>' + d.stnm + '</td><td>' + d.stcd + '</td><td>' + d.tm + '</td><td>' + d.rz + '</td><td>' + d.mz + '</td><td>' + d.hnnm + '</td><td>' + d.adnm + '</td><td>' + wptn + '</td></tr>';
                    } else if (d.sbstatus == 1) {
                        str = str + '<tr><td>' + index + '</td><td>' + d.stnm + '</td><td>' + d.stcd + '</td><td>' + d.tm + '</td><td>' + d.rz + '</td><td>' + d.mz + '</td><td>' + d.hnnm + '</td><td>' + d.adnm + '</td><td>' + wptn + '</td></tr>';
                    }

                });
                str = str + '</table>';
                $('.shuiqing').append(str);
            }
        });
        $.ajax({
            type: 'get',
            url: 'http://www.cloudowr.com:8801/api/svr/mgr/sh/getWarnrecord', //预警
            dataType: 'jsonp',
            success: function (data) {
                var index = 0;
                var str = '<table><tr><td width="35px">序号</td><td width="100px">预警行政区划</td><td>预警状态</td><td>预警名称</td><td>预警产生时间</td><td>预警类型</td></tr>';
                $.each(data.ret, function (i, d) {
                    index = index + 1;
                    var warntypeid;
                    var warnstatusid;
                    if (d.warntypeid == 10) {
                        warntypeid = '山洪';
                    } else if (d.warntypeid == 20) {
                        warntypeid = '河道洪水';
                    } else if (d.warntypeid == 30) {
                        warntypeid = '泥石流';
                    } else if (d.warntypeid == 40) {
                        warntypeid = '山体滑坡';
                    } else if (d.warntypeid == 50) {
                        warntypeid = '工程险情';
                    } else if (d.warntypeid == 60) {
                        warntypeid = '其他';
                    }

                    if (d.warnstatusid == 0) {
                        warnstatusid = '新产生';
                    } else if (d.warnstatusid == 10) {
                        warnstatusid = '已内部告警';
                    }
                    else if (d.warnstatusid == 20) {
                        warnstatusid = '已外部告警';
                    }
                    else if (d.warnstatusid == 30) {
                        warnstatusid = '关闭预警';
                    }
                    else if (d.warnstatusid == 40) {
                        warnstatusid = '响应启动';
                    }
                    else if (d.warnstatusid == 50) {
                        warnstatusid = '响应反馈';
                    }
                    else if (d.warnstatusid == 60) {
                        warnstatusid = '响应结束';
                    }
                    str = str + '<tr><td>' + index + '</td><td>' + d.adnm + '</td><td>' + warnstatusid + '</td><td>' + d.warnnm + '</td><td>' + d.warnstm + '</td><td>' + warntypeid + '</td></tr>';
                });
                str = str + '</table>';
                $('.yujing').append(str);
            }
        });

        initMap();
    })
    function shipin() {
        $.ajax({
            url: '../mgr/live/pull?streamName=qichun',
            dataType: 'text',
            success: function (text) {
                if( text == 'false' ){
                    //alert('没有找到');
                    return;
                }

                new prismplayer({
                    id: "J_prismPlayer", // 容器id
                    source: text,  // 视频url 支持互联网可直接访问的视频地址
                    autoplay: true,      // 自动播放
                    width: '100%',
                    height: '100%'
                });
            }
        });
    }

    function initMap() {
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(115.584037, 30.333302);
        map.centerAndZoom(point, 10);

        map.enableDragging();
        map.enableScrollWheelZoom();
        map.enableDoubleClickZoom();
        map.enableKeyboard();
        map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE}));
        map.addControl(new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1}));
        map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}));

        map.setMapStyle({
            styleJson: [
                {
                    "featureType": "land",
                    "elementType": "all",
                    "stylers": {
                        "color": "#ffffff"
                    }
                }
            ]
        });

        var bdary = new BMap.Boundary();
        bdary.get("黄冈市蕲春县", function (rs) {       //获取行政区域
//        map.clearOverlays();        //清除地图覆盖物
            var count = rs.boundaries.length; //行政区域的点有多少个
            if (count === 0) {
                return;
            }
            var pointArray = [];
            for (var i = 0; i < count; i++) {
                var ply = new BMap.Polyline(rs.boundaries[i], {strokeWeight: 4, strokeColor: "#ff0000"}); //建立多边形覆盖物
                map.addOverlay(ply);  //添加覆盖物
                pointArray = pointArray.concat(ply.getPath());
            }
        });

        var myIcon = new BMap.Icon('img/live.gif', new BMap.Size(50, 50));
        var marker = new BMap.Marker(point, {icon: myIcon, offset: new BMap.Size(0, 5)});
        map.addOverlay(marker);

        marker.addEventListener("click", openInfo);

        function openInfo() {
            var infowin = new BMap.InfoWindow($('#info').html(), {
                enableCloseOnClick: false,
                offset: new BMap.Size(8, -8)
            });
            map.openInfoWindow(infowin, point);
        }

        openInfo();
        shipin();
    }

</script>
</html>